<div class="card">
    <div class="dot-container-main">
      <span class="dot dot1	 size-5"></span>
      <span class="dot dot2	 size-5"></span>
      <span class="dot dot3	 size-5"></span>
      <span class="dot dot4	 size-5"></span>
      <span class="dot dot5	 size-5"></span>
      <span class="dot dot6	 size-5"></span>
      <span class="dot dot7	 size-5"></span>
      <span class="dot dot8	 size-5"></span>
      <span class="dot dot9	 size-5"></span>
      <span class="dot dot10 size-5"></span>
      <span class="dot dot11 size-5"></span>
      <span class="dot dot12 size-5"></span>
      <span class="dot dot13 size-5"></span>
      <span class="dot dot14 size-5"></span>
      <span class="dot dot15 size-5"></span>
      <span class="dot dot16 size-5"></span>
      <span class="dot dot17 size-5"></span>
      <span class="dot dot18 size-5"></span>
      <span class="dot dot19 size-5"></span>
      <span class="dot dot20 size-5"></span>
      <span class="dot dot21 size-5"></span>
      <span class="dot dot22 size-5"></span>
      <span class="dot dot23 size-5"></span>
      <span class="dot dot24 size-5"></span>
      <span class="dot dot25 size-5"></span>
      <span class="dot dot26 size-5"></span>
      <span class="dot dot27 size-5"></span>
      <span class="dot dot28 size-5"></span>
      <span class="dot dot29 size-5"></span>
      <span class="dot dot30 size-5"></span>
      <span class="dot dot31 size-5"></span>
      <span class="dot dot32 size-5"></span>
      <span class="dot dot33 size-5"></span>
      <span class="dot dot34 size-5"></span>
      <span class="dot dot35 size-5"></span>
      <span class="dot dot36 size-5"></span>
      <span class="dot dot37 size-5"></span>
      <span class="dot dot38 size-5"></span>
      <span class="dot dot39 size-5"></span>
      <span class="dot dot40 size-5"></span>
      <span class="dot dot41 size-5"></span>
      <span class="dot dot42 size-5"></span>
      <span class="dot dot43 size-5"></span>
      <span class="dot dot44 size-5"></span>
      <span class="dot dot45 size-5"></span>
      <span class="dot dot46 size-5"></span>
      <span class="dot dot47 size-5"></span>
      <span class="dot dot48 size-5"></span>
      <span class="dot dot49 size-5"></span>
      <span class="dot dot50 size-5"></span>
      <span class="dot dot51 size-5"></span>
      <span class="dot dot52 size-10"></span>
      <span class="dot dot53 size-10"></span>
      <span class="dot dot54 size-10"></span>
      <span class="dot dot55 size-10"></span>
      <span class="dot dot56 size-10"></span>
      <span class="dot dot57 size-10"></span>
      <span class="dot dot58 size-10"></span>
      <span class="dot dot59 size-10"></span>
      <span class="dot dot60 size-10"></span>
      <span class="dot dot61 size-10"></span>
      <span class="dot dot62 size-10"></span>
      <span class="dot dot63 size-10"></span>
      <span class="dot dot64 size-10"></span>
      <span class="dot dot65 size-10"></span>
      <span class="dot dot66 size-10"></span>
      <span class="dot dot67 size-10"></span>
      <span class="dot dot68 size-10"></span>
      <span class="dot dot69 size-10"></span>
      <span class="dot dot70 size-10"></span>
      <span class="dot dot71 size-10"></span>
      <span class="dot dot72 size-15"></span>
      <span class="dot dot73 size-15"></span>
      <span class="dot dot74 size-15"></span>
      <span class="dot dot75 size-15"></span>
      <span class="dot dot76 size-20">
        <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" class="svg">
          <path d="M 9.9980469 3 C 6.1390469 3 3 6.1419531 3 10.001953 L 3 20.001953 C 3 23.860953 6.1419531 27 10.001953 27 L 20.001953 27 C 23.860953 27 27 23.858047 27 19.998047 L 27 9.9980469 C 27 6.1390469 23.858047 3 19.998047 3 L 9.9980469 3 z M 22 7 C 22.552 7 23 7.448 23 8 C 23 8.552 22.552 9 22 9 C 21.448 9 21 8.552 21 8 C 21 7.448 21.448 7 22 7 z M 15 9 C 18.309 9 21 11.691 21 15 C 21 18.309 18.309 21 15 21 C 11.691 21 9 18.309 9 15 C 9 11.691 11.691 9 15 9 z M 15 11 A 4 4 0 0 0 11 15 A 4 4 0 0 0 15 19 A 4 4 0 0 0 19 15 A 4 4 0 0 0 15 11 z"></path>
        </svg>
      </span>
      <span class="dot dot77	size-20">
        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="svg">
          <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
        </svg>
      </span>
      <span class="dot dot78	size-20">
        <svg viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" class="svg">
          <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path>
        </svg>
      </span>
      <span class="dot dot79	size-15"></span>
      <span class="dot dot80	size-5"></span>
      <span class="dot dot81	size-5"></span>
      <span class="dot dot82	size-5"></span>
      <span class="dot dot83	size-5"></span>
    </div>
    <div class="text">UIVERS.IO</div>
  </div>
<style>
/* From Uiverse.io by Smit-Prajapati - Tags: card, cool card, cardhover , card animation, card hover */
.card {
  width: 200px;
  height: 300px;
  position: relative;
  background-image: linear-gradient(230deg, rgba(93, 93, 93, 0.03) 0%, rgba(93, 93, 93, 0.03) 50%, rgba(78, 78, 78, 0.03) 50%, rgba(78, 78, 78, 0.03) 100%), linear-gradient(107deg, rgba(55, 55, 55, 0.01) 0%, rgba(55, 55, 55, 0.01) 50%, rgba(170, 170, 170, 0.01) 50%, rgba(170, 170, 170, 0.01) 100%), linear-gradient(278deg, rgba(16, 16, 16, 0.03) 0%, rgba(16, 16, 16, 0.03) 50%, rgba(24, 24, 24, 0.03) 50%, rgba(24, 24, 24, 0.03) 100%), linear-gradient(205deg, rgba(116, 116, 116, 0.03) 0%, rgba(116, 116, 116, 0.03) 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 100%), linear-gradient(150deg, rgba(5, 5, 5, 0.03) 0%, rgba(5, 5, 5, 0.03) 50%, rgba(80, 80, 80, 0.03) 50%, rgba(80, 80, 80, 0.03) 100%), linear-gradient(198deg, rgba(231, 231, 231, 0.03) 0%, rgba(231, 231, 231, 0.03) 50%, rgba(26, 26, 26, 0.03) 50%, rgba(26, 26, 26, 0.03) 100%), linear-gradient(278deg, rgba(89, 89, 89, 0.03) 0%, rgba(89, 89, 89, 0.03) 50%, rgba(26, 26, 26, 0.03) 50%, rgba(26, 26, 26, 0.03) 100%), linear-gradient(217deg, rgba(28, 28, 28, 0.03) 0%, rgba(28, 28, 28, 0.03) 50%, rgba(202, 202, 202, 0.03) 50%, rgba(202, 202, 202, 0.03) 100%), linear-gradient(129deg, rgba(23, 23, 23, 0.03) 0%, rgba(23, 23, 23, 0.03) 50%, rgba(244, 244, 244, 0.03) 50%, rgba(244, 244, 244, 0.03) 100%), linear-gradient(135deg, rgb(1, 132, 255), rgb(198, 5, 91));
  display: grid;
  place-content: center;
  border-radius: 20px;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.size-5 {
  width: 5px;
  border-radius: 2px;
}

.size-10 {
  width: 10px;
  border-radius: 4px;
}

.size-15 {
  width: 15px;
  border-radius: 5px;
}

.size-20 {
  width: 20px;
  border-radius: 7px;
}

.dot-container-main {
  width: 95px;
  height: 110px;
  position: relative;
}

.dot {
  position: absolute;
  aspect-ratio: 1;
  background: linear-gradient(45deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.34) 100%);
  border-top: 1px solid rgb(255, 255, 255);
  border-right: 1px solid white;
  transition: left 1s ease-in-out, top 1s ease-in-out, transform 0.2s ease-in-out;
}

.dot:hover {
  transform: scale(1.8);
}

.dot1 {
  left: -40px;
  top: -80px;
}

.dot52 {
  left: 10px;
  top: -75px;
}

.dot4 {
  left: 40px;
  top: -50px;
}

.dot3 {
  left: -20px;
  top: -70px;
}

.dot72 {
  left: 50px;
  top: -85px;
}

.dot2 {
  left: 110px;
  top: -30px;
}

.dot53 {
  left: 125px;
  top: -80px;
}

.dot5 {
  left: 100px;
  top: -20px;
}

.dot73 {
  left: -25px;
  top: -50px;
}

.dot6 {
  left: 30px;
  top: -45px;
}

.dot7 {
  left: 80px;
  top: -60px;
}

.dot55 {
  left: 60px;
  top: -30px;
}

.dot8 {
  left: 70px;
  top: -35px;
}

.dot54 {
  left: 120px;
  top: -20px;
}

.dot56 {
  left: 85px;
  top: -5px;
}

.dot10 {
  left: 80px;
  top: -20px;
}

.dot12 {
  left: -40px;
  top: -25px;
}

.dot9 {
  left: 0px;
  top: -50px;
}

.dot76 {
  left: 10px;
  top: -20px;
}

.dot11 {
  left: 110px;
  top: 0px;
}

.dot59 {
  left: 110px;
  top: 30px;
}

.dot14 {
  left: 100px;
  top: 10px;
}

.dot58 {
  left: -20px;
  top: 0px;
}

.dot13 {
  left: 50px;
  top: -10px;
}

.dot15 {
  left: 70px;
  top: 0px;
}

.dot57 {
  left: 30px;
  top: 15px;
}

.dot17 {
  left: 80px;
  top: 10px;
}

.dot19 {
  left: 95px;
  top: 30px;
}

.dot23 {
  left: 130px;
  top: 45px;
}

.dot61 {
  left: 75px;
  top: 20px;
}

.dot28 {
  left: 100px;
  top: 40px;
}

.dot18 {
  left: -35px;
  top: 0px;
}

.dot16 {
  left: 0px;
  top: 20px;
}

.dot20 {
  left: -30px;
  top: 10px;
}

.dot24 {
  left: -30px;
  top: 30px;
}

.dot21 {
  left: 50px;
  top: 10px;
}

.dot65 {
  left: 30px;
  top: 30px;
}

.dot60 {
  left: -15px;
  top: 20px;
}

.dot25 {
  left: -5px;
  top: 40px;
}

.dot30 {
  left: 20px;
  top: 40px;
}

.dot32 {
  left: 0px;
  top: 60px;
}

.dot78 {
  left: -35px;
  top: 170px;
}

.dot50 {
  left: 120px;
  top: 180px;
}

.dot79 {
  left: 60px;
  top: 170px;
}

.dot69 {
  left: 100px;
  top: 135px;
}

.dot68 {
  left: 110px;
  top: 100px;
}

.dot47 {
  left: 0px;
  top: 175px;
}

.dot71 {
  left: 20px;
  top: 160px;
}

.dot83 {
  left: 100px;
  top: 170px;
}

.dot45 {
  left: 10px;
  top: 160px;
}

.dot67 {
  left: 40px;
  top: 140px;
}

.dot49 {
  left: 45px;
  top: 190px;
}

.dot48 {
  left: 20px;
  top: 180px;
}

.dot46 {
  left: 100px;
  top: 120px;
}

.dot70 {
  left: 80px;
  top: 145px;
}

.dot75 {
  left: -20px;
  top: 140px;
}

.dot82 {
  left: 60px;
  top: 160px;
}

.dot43 {
  left: 50px;
  top: 170px;
}

.dot44 {
  left: 60px;
  top: 130px;
}

.dot77 {
  left: 110px;
  top: 70px;
}

.dot42 {
  left: 90px;
  top: 110px;
}

.dot81 {
  left: 90px;
  top: 140px;
}

.dot62 {
  left: 100px;
  top: 55px;
}

.dot31 {
  left: 85px;
  top: 80px;
}

.dot33 {
  left: -30px;
  top: 130px;
}

.dot80 {
  left: 70px;
  top: 120px;
}

.dot39 {
  left: 30px;
  top: 115px;
}

.dot63 {
  left: -30px;
  top: 55px;
}

.dot41 {
  left: 50px;
  top: 110px;
}

.dot40 {
  left: 40px;
  top: 120px;
}

.dot66 {
  left: 70px;
  top: 95px;
}

.dot37 {
  left: 10px;
  top: 130px;
}

.dot51 {
  left: -5px;
  top: 105px;
}

.dot29 {
  left: -15px;
  top: 90px;
}

.dot38 {
  left: 10px;
  top: 90px;
}

.dot35 {
  left: 50px;
  top: 90px;
}

.dot64 {
  left: 80px;
  top: 45px;
}

.dot34 {
  left: 70px;
  top: 70px;
}

.dot36 {
  left: 65px;
  top: 80px;
}

.dot74 {
  left: 30px;
  top: 70px;
}

.dot26 {
  left: 45px;
  top: 60px;
}

.dot22 {
  left: 60px;
  top: 35px;
}

.dot27 {
  left: 50px;
  top: 70px;
}

.card:hover {
  transform: scale(1.1);
}

.card:hover .text {
  opacity: 1;
}

.card:hover .dot1 {
  left: 0px;
  top: 0px;
}

.card:hover .dot2 {
  left: 90px;
  top: 0px;
}

.card:hover .dot3 {
  left: 5px;
  top: 5px;
}

.card:hover .dot4 {
  left: 45px;
  top: 5px;
}

.card:hover .dot5 {
  left: 85px;
  top: 5px;
}

.card:hover .dot6 {
  left: 15px;
  top: 10px;
}

.card:hover .dot7 {
  left: 75px;
  top: 10px;
}

.card:hover .dot8 {
  left: 55px;
  top: 15px;
}

.card:hover .dot9 {
  left: 15px;
  top: 20px;
}

.card:hover .dot10 {
  left: 60px;
  top: 20px;
}

.card:hover .dot11 {
  left: 90px;
  top: 20px;
}

.card:hover .dot12 {
  left: 0px;
  top: 25px;
}

.card:hover .dot13 {
  left: 75px;
  top: 25px;
}

.card:hover .dot14 {
  left: 85px;
  top: 25px;
}

.card:hover .dot15 {
  left: 80px;
  top: 30px;
}

.card:hover .dot16 {
  left: 15px;
  top: 35px;
}

.card:hover .dot17 {
  left: 75px;
  top: 35px;
}

.card:hover .dot18 {
  left: 0px;
  top: 40px;
}

.card:hover .dot19 {
  left: 85px;
  top: 40px;
}

.card:hover .dot20 {
  left: 5px;
  top: 45px;
}

.card:hover .dot21 {
  left: 50px;
  top: 45px;
}

.card:hover .dot22 {
  left: 60px;
  top: 45px;
}

.card:hover .dot23 {
  left: 90px;
  top: 45px;
}

.card:hover .dot24 {
  left: 0px;
  top: 50px;
}

.card:hover .dot25 {
  left: 15px;
  top: 50px;
}

.card:hover .dot26 {
  left: 45px;
  top: 50px;
}

.card:hover .dot27 {
  left: 55px;
  top: 50px;
}

.card:hover .dot28 {
  left: 80px;
  top: 50px;
}

.card:hover .dot29 {
  left: 10px;
  top: 55px;
}

.card:hover .dot30 {
  left: 20px;
  top: 55px;
}

.card:hover .dot31 {
  left: 75px;
  top: 55px;
}

.card:hover .dot32 {
  left: 25px;
  top: 60px;
}

.card:hover .dot33 {
  left: 5px;
  top: 65px;
}

.card:hover .dot34 {
  left: 55px;
  top: 65px;
}

.card:hover .dot35 {
  left: 30px;
  top: 70px;
}

.card:hover .dot36 {
  left: 50px;
  top: 70px;
}

.card:hover .dot37 {
  left: 25px;
  top: 75px;
}

.card:hover .dot38 {
  left: 35px;
  top: 75px;
}

.card:hover .dot39 {
  left: 30px;
  top: 90px;
}

.card:hover .dot40 {
  left: 40px;
  top: 90px;
}

.card:hover .dot41 {
  left: 50px;
  top: 90px;
}

.card:hover .dot42 {
  left: 80px;
  top: 90px;
}

.card:hover .dot43 {
  left: 35px;
  top: 95px;
}

.card:hover .dot44 {
  left: 55px;
  top: 95px;
}

.card:hover .dot45 {
  left: 25px;
  top: 100px;
}

.card:hover .dot46 {
  left: 50px;
  top: 100px;
}

.card:hover .dot47 {
  left: 20px;
  top: 105px;
}

.card:hover .dot48 {
  left: 45px;
  top: 105px;
}

.card:hover .dot49 {
  left: 55px;
  top: 105px;
}

.card:hover .dot50 {
  left: 90px;
  top: 105px;
}

.card:hover .dot51 {
  left: 15px;
  top: 60px;
}

.card:hover .dot52 {
  left: 10px;
  top: 0px;
}

.card:hover .dot53 {
  left: 75px;
  top: 0px;
}

.card:hover .dot54 {
  left: 85px;
  top: 10px;
}

.card:hover .dot55 {
  left: 45px;
  top: 15px;
}

.card:hover .dot56 {
  left: 75px;
  top: 15px;
}

.card:hover .dot57 {
  left: 10px;
  top: 25px;
}

.card:hover .dot58 {
  left: 0px;
  top: 30px;
}

.card:hover .dot59 {
  left: 85px;
  top: 30px;
}

.card:hover .dot60 {
  left: 10px;
  top: 40px;
}

.card:hover .dot61 {
  left: 75px;
  top: 40px;
}

.card:hover .dot62 {
  left: 85px;
  top: 50px;
}

.card:hover .dot63 {
  left: 0px;
  top: 55px;
}

.card:hover .dot64 {
  left: 55px;
  top: 55px;
}

.card:hover .dot65 {
  left: 30px;
  top: 60px;
}

.card:hover .dot66 {
  left: 40px;
  top: 70px;
}

.card:hover .dot67 {
  left: 20px;
  top: 90px;
}

.card:hover .dot68 {
  left: 85px;
  top: 90px;
}

.card:hover .dot69 {
  left: 80px;
  top: 100px;
}

.card:hover .dot70 {
  left: 40px;
  top: 95px;
}

.card:hover .dot71 {
  left: 30px;
  top: 100px;
}

.card:hover .dot72 {
  left: 50px;
  top: 0px;
}

.card:hover .dot73 {
  left: 0px;
  top: 10px;
}

.card:hover .dot74 {
  left: 40px;
  top: 55px;
}

.card:hover .dot75 {
  left: 10px;
  top: 65px;
}

.card:hover .dot76 {
  left: 45px;
  top: 25px;
}

.card:hover .dot77 {
  left: 75px;
  top: 60px;
}

.card:hover .dot78 {
  left: 0px;
  top: 90px;
}

.card:hover .dot79 {
  left: 60px;
  top: 95px;
}

.card:hover .dot80 {
  left: 60px;
  top: 90px;
}

.card:hover .dot81 {
  left: 70px;
  top: 90px;
}

.card:hover .dot82 {
  left: 75px;
  top: 95px;
}

.card:hover .dot83 {
  left: 75px;
  top: 105px;
}

.size-20 {
  display: grid;
  place-content: center;
  border: 1px solid rgb(255, 255, 255);
}

.size-20::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: inherit;
  background: black;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.size-20 .svg {
  fill: rgba(255, 255, 255, 0);
  height: 10px;
  width: 10px;
  transition: all 0.2s ease-in-out;
}

.size-20:hover {
  transform: scale(1.5);
  border: none;
}

.size-20:hover::before {
  opacity: 1;
}

.size-20:hover .svg {
  fill: white;
  z-index: 99;
}

.text {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 5px;
  color: white;
  opacity: 0;
  transition: all 1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
</style>
